<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 事件属性="事件处理函数" -->
    <button onclick="console.log(this, event)">计数1</button>

    <!-- 传递一个定义在 script 中的事件处理函数。传递魔法参数：this、event -->
    <button onclick="btnClickHandler(this, event)">计数2</button>
    <script>
      // 如果你想在函数内拿到,按钮（标签）和事件对象
      function btnClickHandler(thisXxx, eventYyy) {
        // thisXxx 是按钮本身，eventYyy 是event是事件对象本身。符合魔法参数的定义
        console.log(thisXxx); // 按钮
        console.log(eventYyy); // 事件对象

        // 但是函数体内 this，在这个例子中指向 window
        console.log(this);
        let event = 123;
        // event “魔法”参数始终存在于函数执行上下文，并且和传入的 eventYyy 相等
        console.log(event === eventYyy);
      }
    </script>

    <button id="btn-003">计数3</button>
    <script>
      const button = document.getElementById('btn-003');
      button.onclick = function (e) {
        // 正确的指向了 button
        console.log(this);
        // 按钮点击时传入的事件对象
        console.log(e);
        // “魔法” 参数，依然存在但是不推荐使用
        console.log(event);
        console.log(e === event);
      };

      button.onclick = function (e) {
        console.log('我是新的事件处理函数');
      };
    </script>

    <button id="btn-004">计数4</button>
    <script>
      const button2 = document.getElementById('btn-004');

      function onClick1(e) {
        console.log('onClick1 this', this);
        console.log('onClick1 event', e);
        console.log('onClick1魔法参数', event);
        console.log('onClick1魔法参数和e的关系', e === event);
      }
      function onClick2(e) {
        console.log('onClick2 this', this);
        console.log('onClick2 event', e);
        console.log('onClick2魔法参数', event);
        console.log('onClick2魔法参数和e的关系', e === event);
      }
      button2.addEventListener('click', onClick2);
      button2.addEventListener('click', onClick1);
    </script>
  </body>
</html>
